<template>
  <div class="app-container">
     <el-card shadow="hover">
    <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="80px">
      <el-row class="bottomLine">
        <el-form-item label="应用:" label-width="40">
          <el-select v-model="queryParams.applicationCode" multiple placeholder="请选择应用">
            <el-option v-for="dict in applicationList" :key="dict.appCode" :label="dict.name" :value="dict.appCode">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row :gutter="10" class="bottomLine">
        <el-form-item label="用户进行" prop="status">
          <el-popover placement="bottom-start" width="800" trigger="click">
            <PanelSelect ref="panelSelect" @selected="selected" :eventObj="1" />
            <el-input slot="reference" v-model="queryParams.typeName" placeholder="点击选择事件" readonly
              style="width: 200px;" suffix-icon="el-icon-arrow-down">
            </el-input>
          </el-popover>
          的
          <el-cascader v-model="queryParams.typeItem" :options="allEventItemMethodOpts[queryParams.typeId]"
            :props="{ expandTrigger: 'hover', multiple: false }"></el-cascader>
        </el-form-item>
        <el-tooltip class="item" effect="dark" content="若用户在一天内进行Web 视区停留1 次，就记 1 次。" placement="right">
          <i class="el-icon-info" style="margin-top:10px"></i>
        </el-tooltip>

      </el-row>


      <div class="addictio_index">
        <el-row style="line-height:35px;">
          事件满足
          <!-- <a style="cursor:text;margin-top: 10px;">事件满足</a> -->
          <el-link type="primary" :underline="false" style="padding-left:20px; margin-bottom:10px;"
            @click="addRule('initRuleTypes')">
            <i class="el-icon-plus">筛选</i> 
          </el-link>
        </el-row>
        <el-row v-show="queryParams.initRuleTypes.length > 0" class="bottomLine">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <AndOrLine style="height: calc(100% - 10px);" v-show="queryParams.initRuleTypes.length > 1"
              v-model="queryParams.userConditionRelation"></AndOrLine>
            <p style="margin: 0 0 10px;" v-for="(eventItem, index) in queryParams.initRuleTypes"  class="select_style">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;">
                <el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName"
                  :value="dict.id" />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;" value-key="id">
                <el-option v-for="dict in allEventItemListOpts[eventItem.eventType]" :key="dict.id"
                  :label="dict.eventItemName" :value="dict" />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 10px;">
                <el-option v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]" :key="dict.id"
                  :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                v-show="eventItem.eventItemExpression != 'between'"></el-input>
              <span v-show="eventItem.eventItemExpression == 'between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:90px">
                </el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right" style="width:90px">
                </el-input>之间
              </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                @click="removeRule(queryParams.initRuleTypes, index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>
          </el-form-item>
        </el-row>
      </div>

      <div class="addictio_index">
        <el-row style="line-height:35px;">
          用户符合
          <el-link type="primary" :underline="false" style="padding-left:20px;margin-bottom:10px"
            @click="addUserAttribute">
            <i class="el-icon-plus">筛选</i> 
          </el-link>
        </el-row>
        <el-row v-show="queryParams.userAttributes.length > 0" class="bottomLine">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <AndOrLine style="height: calc(100% - 10px);" v-show="queryParams.userAttributes.length > 1"
              v-model="queryParams.userConditionRelation"></AndOrLine>
            <p v-for="(v, index) in queryParams.userAttributes" style="margin: 0 0 10px;"  class="select_style">
              <el-select v-model="queryParams.userAttributes[index].attributeName"
                style="width:120px;margin-right: 10px;"
                @change="userAttributeChangeFun(queryParams.userAttributes, index)">
                <el-option v-for="dict in userAttributeOptions" :key="dict.attributeName" :label="dict.attributeRemark"
                  :value="dict.attributeName" />
              </el-select>
              <el-select v-model="queryParams.userAttributes[index].valueExpression"
                style="width:120px;margin-right: 10px;"
                @change="eventPropertyChange(queryParams.userAttributes[index], index)">
                <el-option v-for="dict in userPropertysOptions" :key="dict.eventItemCode"
                  :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="queryParams.userAttributes[index].value1Str" type="text" controls-position="right"
                style="width:100px" v-show="queryParams.userAttributes[index].valueExpression != 'between'"></el-input>
              <span v-show="queryParams.userAttributes[index].valueExpression == 'between'">
                <el-input v-model="queryParams.userAttributes[index].value1Str" type="text" controls-position="right"
                  style="width:90px"></el-input>与
                <el-input v-model="queryParams.userAttributes[index].value2Str" type="text" controls-position="right"
                  style="width:90px"></el-input>之间
              </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                @click="removeRule(queryParams.userAttributes, index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    </el-card>
    <el-container>

      <el-main>
        <el-card shadow="hover"  style="margin-left:-19px ; width: 103%; ">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-date-picker v-model="queryParams.dateRange" size="small" style="width: 260px" value-format="yyyy-MM-dd"
              type="daterange" range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期"
              end-placeholder="结束日期"></el-date-picker>
          </el-col>
          <el-col :span="2" style="float:right;">
            <el-select v-model="queryParams.dateType" placeholder="请选择活动区域" @change="querySpreadDtaFun">
              <el-option label="全部" value=""></el-option>
              <el-option label="一天内" value="day"></el-option>
              <el-option label="一周内" value="week"></el-option>
              <el-option label="一月内" value="month"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-table :data="tableData" border v-loading="loading" height="320" style="width: 100%; margin-top:10px">
          <el-table-column v-for="(item, index) in tableTitle" :sortable="item.sortable" :key="index"
            :prop="item.columnName" :label="item.columnLabel" />
        </el-table>
        </el-card>
      </el-main>

    </el-container>
  </div>
</template>

<script>
import PanelSelect from "@/components/PanelSelect";
import { getAllSiteFlowList, getKeepDataFun, getSpreadDataFun } from "@/api/analytics/basemeasure";
import OtherLineChart from "@/views/analytics/basemonitor/comments/OtherLineChart";
import AndOrLine from '@/components/AndOrLine/index.vue'
import { allEventItemsOptions, eventItemsByType, eventItemsOptions, eventTypeOptions } from "@/api/config/item";
import { listAllPropertyResult, listPropertyByType } from "@/api/config/property";
import { getUserAttributeList } from "@/api/config/userattribute";
import { getAllEventMethodResult } from "@/api/config/emethod";
import { listApplication } from "@/api/config/application";
import { parseTime } from "@/utils/ruoyi";


export default {
  name: "spread",
  components: {
    OtherLineChart,
    PanelSelect,
    AndOrLine,
  },
  data() {
    return {
      switchValue: false,
      statusOptions: [],
      params: {
        dateRange: ''
      },
      // 遮罩层
      loading: false,
      tableData: [],
      tableTitle: [],
      userPropertysOptions: [],
      userAttributeOptions: [],
      // 查询参数
      queryParams: {
        typeName: '',
        typeId: '',
        typeItem: '',
        categoryType: '',
        eventJson: '',
        initRuleTypes: [],
        userAttributes: [],
        dateRange: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
        dateType: 'week',
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        status: undefined,
        eventConditionRelation: 'and',
        userConditionRelation: 'and',
      },
      eventItemMethosOpts: [],
      allEventItemMethodOpts: {},
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      drawer: false,
      direction: 'rtl',
      formLabelWidth: '90px',
      index: 1,
      ruleTypes3Flag: 0,
      eventTypeOptions: [],
      referrerTypeOptions: [],
      allEventItemListOpts: {},
      eventPropertysOptions: {},
      applicationList: [],
    };
  },

  mounted() {
    this.$EventBus.$on('askComponentQueryJson', () => {
      this.askComponentQueryJson()
    })
  },

  beforeDestroy() {
    this.$EventBus.$off('askComponentQueryJson')
  },

  created() {
    this.getAllFlowList();
    this.getEventTypeList();
    this.getAllEventItemsList();
    this.getApplicationList();
    this.getUserAttributeList();
    this.querySpreadDtaFun();
  },
  methods: {

    //提交queryJson给 sensorsdata
    askComponentQueryJson() {
      let requestJson = JSON.stringify(this.queryParams);
      this.$EventBus.$emit('commitComponentQueryJson', requestJson)
    },

    getApplicationList() {
      listApplication({ status: 'Y' }).then(response => {
        this.applicationList = response.rows;
        let that = this;
        this.applicationList.forEach(function (app) {
          if (app.defaultFlag === 'Y') {
            that.queryParams.applicationCode.push(app.appCode);
          }
        });
      });
    },
    getAllFlowList() {
      var param = {};
      getAllSiteFlowList(param).then(response => {
        this.lineChartData.actualData = response.data;
      });
    },
    selected(item) {
      this.queryParams.typeName = item.eventTypeName;
      this.queryParams.tventType = item.eventType;
      this.queryParams.typeId = item.id;
      this.queryParams.categoryType = item.categoryType;
      this.queryParams.eventJson = item.eventJson;
    },
    addRule(name) {
      let eventItem = {
        eventType: '',
        eventItem: {},
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      this.queryParams[name].push(eventItem);
    },

    removeRule(array, index) {
      array.splice(index, 1);
    },
    eventTypeChange(array, index) {
      array[index].eventItem = {};
      array[index].eventItemExpression = '';
      array[index].value1Str = '';
      array[index].value2Str = '';
    },

    getEventTypeList() {
      var param = { status: 'Y' };
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
      });
    },
    getAllEventItemsList() {
      allEventItemsOptions().then(response => {
        this.allEventItemListOpts = response.data;
      });
      listAllPropertyResult().then(response => {
        this.eventPropertysOptions = response.data;
      });
      getAllEventMethodResult().then(response => {
        this.allEventItemMethodOpts = response.data;
      });
    },
    getUserAttributeList() {
      var param = { status: 'Y' };
      getUserAttributeList(param).then(response => {
        this.userAttributeOptions = response.data;
      });
    },
    getEventItemsList(type) {
      var param = { eventType: type };
      eventItemsOptions(param).then(response => {
        this.eventItemsOptions = response.data;
      });
    },
    getItemsPropertyList(type) {
      var param = { valueType: type };
      listPropertyByType(param).then(response => {
        this.eventPropertysOptions = response.data;
      });
    },
    addUserAttribute() {
      let userAttribute = {
        attributeName: '',
        attributeRemark: '',
        valueExpression: '',
        dataType: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      this.queryParams.userAttributes.push(userAttribute);
    },
    userAttributeChangeFun(array, index) {
      array[index].valueExpression = '';
      array[index].value1Str = '';
      array[index].value2Str = '';
      listPropertyByType({ valueType: array[index].dataType }).then(response => {
        this.userPropertysOptions = response.data;
      });
    },

    querySpreadDtaFun() {
      console.log(this.queryParams);
      this.loading = true;
      let requestJson = JSON.stringify(this.queryParams);
      getSpreadDataFun({ requestJson: requestJson }).then(response => {
        console.log(response.data);
        this.tableTitle = response.data.tableTitle;
        this.tableData = response.data.tableData;
        this.loading = false;
      });
    }
  },

};
</script>
<style lang="scss" scoped>
.innerContent {
  // margin-bottom: 50px;
  font-size: 14px;
  line-height: 20px;
  color: #307ef2;
  cursor: pointer;
}

.bottomLine {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #e9f0f7;
  margin-bottom: 10px;
}



.addictio_index {
  border-bottom: 1px solid #e9f0f7;
}

::v-deep .el-table__body tbody tr:nth-child(odd) {
  background-color: #f0f9eb;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
  background-color: #f0f9eb;
}

.select_style:hover{
  width: 1600px;
  background-color: #e2ecfa;
}
// .app-container {
//   background-color: #f7f9fa;
// }

.funnel_style{
  color: #307ef2;
}

::v-deep {
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    //background-color: #ccc;
  }
}
</style>
